<template>
	<nav class="mui-bar mui-bar-tab-hani">
		<template v-for="(item,$index) in navBar">
			<router-link :to="{name:item.id}" class="mui-tab-item-hani" exact>
				<span class="mui-icon" :class="item.icon"></span>
				<span class="mui-tab-label">{{item.lable}}</span>
			</router-link>
		</template>
		
	</nav>
</template>
<script>
	export default{
		data:function(){
			return{
				navBar:[
					{icon:'icon iconfont icon-shouye',lable:'首页',id:'Home',active:true},
					{icon:'icon iconfont icon-faxian',lable:'发现',id:'Find',active:false},
					{icon:'icon iconfont icon-gongju1',lable:'工具',id:'Tool',active:false},
					{icon:'icon iconfont icon-icontouxiang',lable:'我的',id:'Mind',active:false},
				]
			}
		},
	}
</script>
<style scoped="scoped">
	.mui-bar-tab-hani{
		bottom: 0;
		display: table;
		width: 100%;
		height: 1.25rem;
		padding: 0;
		table-layout: fixed;
		border-top: 0;
		border-bottom: 0;
		background-color: #FFFFFF;
		-webkit-transition: opacity 0.2s;
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
	}
	.mui-bar-tab-hani
	.mui-tab-item-hani{
		display: table-cell;
		overflow: hidden;
		width: 1%;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #999999;
	}
	
	.mui-bar-tab-hani
	.mui-tab-item-hani 
	.mui-icon{
		top: 3px;
		width: 24px;
		height: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.mui-bar-tab-hani
	.mui-tab-item-hani 
	.mui-icon~
	.mui-tab-label{
		font-size: 11px;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.mui-bar-tab-hani .router-link-exact-active{
		color: #F08800;
	}
</style>

